Revision:
using: "display: none"
using: "visibility: hidden"
expanding/collapsing an overlay
pointer events
slide transition: translateY
expanding "letterbox"
expanding/collapsing in the document flow
anchor content to the bottom
<div class="spec">
<div>
<p class="intro">using: "display: none"</p>
<input type="checkbox" id="togglerDemo01">
<label for="togglerDemo01">show content</label>
<div>Something before 🙃</div>
<div class="demo01"> This content should … toggle! 👻</div>
<div>Something after 🙂</div>
</div>
<div>
<p class="intro">using: "visibility: hidden"</p>
<input type="checkbox" id="togglerDemo02">
<label for="togglerDemo02">show content</label>
<div>Something before 🙃</div>
<div class="demo02"> This content should … toggle! 👻</div>
<div>Something after 🙂</div>
</div>
<div>
<p class="intro">expanding/collapsing an overlay</p>
<input type="checkbox" id="togglerDemo03">
<label for="togglerDemo03">show content</label>
<div>Something before 🙃</div>
<div class="demo03">
<div class="demo03__content"> This content should … toggle! 👻</div>
</div>
<div>Something after 🙂</div>
</div>
<div>
<p class="intro">pointer events</p>
<input type="checkbox" id="togglerDemo04">
<label for="togglerDemo04">show content</label><br>
<input type="checkbox" id="outlineDemo04">
<label for="outlineDemo04">outline container</label>
<div>Something before 🙃</div>
<div class="demo04">
<div class="demo04__content">This content should … toggle! 👻</div>
</div>
<div>Something after 🙂</div>
</div>
<div>
<p class="intro">slide transition: translateY</p>
<input type="checkbox" id="togglerDemo05">
<label for="togglerDemo05">show content</label><br>
<input type="checkbox" id="outlineDemo05">
<label for="outlineDemo05">outline container</label>
<div>Something before 🙃</div>
<div class="demo05">
<div class="demo05__content">This content should … toggle! 👻
<button onclick="alert('click in sliding content')">Click me</button>
</div>
</div>
<div>Something after 🙂</div>
<div>
<button onclick="alert('click in content behind container')">Click me</button>
</div>
</div>
<div>
<p class="intro">expanding "letterbox"</p>
<input type="checkbox" id="togglerDemo06">
<label for="togglerDemo06">show content</label><br>
<input type="checkbox" id="outlineDemo06">
<label for="outlineDemo06">outline containers</label>
<div>Something before 🙃</div>
<div class="demo06">
<div class="demo06__letterbox">
<div class="demo06__content">This content should … toggle! 👻</div>
</div>
</div>
<div>Something after 🙂</div>
</div>
<div>
<p class="intro">expanding/collapsing in the document flow</p>
<input type="checkbox" id="togglerDemo07">
<label for="togglerDemo07">show content</label><br>
<input type="checkbox" id="outlineDemo07">
<label for="outlineDemo07">outline container</label>
<div>Something before 🙃</div>
<div class="demo07">
<div class="demo07__content">
<div class="demo07__padding">This content should … toggle! 👻</div>
</div>
</div>
<div>Something after 🙂</div>
</div>
<div>
<p class="intro">anchor content to the bottom</p>
<input type="checkbox" id="togglerDemo08">
<label for="togglerDemo08">show content</label><br>
<input type="checkbox" id="outlineDemo08">
<label for="outlineDemo08">outline container</label>
<div>Something before 🙃</div>
<div class="demo08">
<div class="demo08__content">
<div class="demo08__padding">This content should … toggle! 👻</div>
</div>
</div>
<div>Something after 🙂</div>
</div>
</div>
<style>
:root{--color-accent-200: lightgreen; --color-text:orangered;}
.frame{display: grid; grid-template-columns: 1fr 1fr 1fr; grid-auto-rows: minmax(2vw, auto);margin-bottom: 4vw;}
.intro{color: blue; font-size: 1.2vw;}
.demo01 {background-color: var(--color-accent-200); color:var(--color-text); display: none; padding: 1vw;}
:checked ~ .demo01 {display: block;}
.demo02 {background-color: var(--color-accent-200); color:var(--color-text);height: 0; padding: 1vw; visibility: hidden;}
:checked ~ .demo02 { height: auto; visibility: visible;}
.demo03 {overflow: hidden;}
.demo03__content {background-color: var(--color-accent-200); color:var(--color-text);padding: 1vw; transition: transform 1s, visibility 1s; transform: translateY(-100%);
visibility: hidden;}
:checked ~ .demo03 .demo03__content {transform: translateY(0); visibility: visible;}
.demo04 {overflow: hidden; position: absolute;}
.demo04__content {background-color: var(--color-accent-200); color:var(--color-text);padding: 1vw; transform: translateY(-100%); transition: transform 1s, visibility 1s; visibility: hidden;}
#togglerDemo04:checked ~ .demo04 .demo04__content {transform: translateY(0);visibility: visible;}
#outlineDemo04:checked ~ .demo04 {outline: 0.1vw dashed red; outline-offset: 0.1vw;}
.demo05 {overflow: hidden; pointer-events: none; position: absolute;}
.demo05__content {background-color: var(--color-accent-200); color:var(--color-text);padding: 1vw; pointer-events: all; transform: translateY(-100%); transition: transform 1s, visibility 1s; visibility: hidden;}
#togglerDemo05:checked ~ .demo05 .demo05__content {transform: translateY(0); visibility: visible;}
#outlineDemo05:checked ~ .demo05 {outline: 0.2vw dashed red; outline-offset: 0.2vw;}
.demo06 {overflow: hidden; padding: 0.6vw; pointer-events: none; position: absolute;}
.demo06__letterbox {overflow: hidden; transform: translateY(-100%); transition: transform 1s, visibility 1s; visibility: hidden;}
.demo06__content {background-color: var(--color-accent-200); color:var(--color-text);padding: 1rem; pointer-events: all; transform: translateY(100%); transition: transform 1s;
}
#togglerDemo06:checked ~ .demo06 .demo06__letterbox {transform: translateY(0);visibility: visible;}
#togglerDemo06:checked ~ .demo06 .demo06__content {transform: translateY(0);}
#outlineDemo06:checked ~ .demo06 {outline: 0.2vw dashed red; outline-offset: 0.4vw;}
#outlineDemo06:checked ~ .demo06 .demo06__letterbox {outline: 0.2vw dashed green; outline-offset: 0.4vw;}
.demo07 {overflow: hidden; display: grid; grid-template-rows: 0fr; overflow: hidden; transition: grid-template-rows 1s;}
.demo07__content { background-color: var(--color-accent-200); color:var(--color-text); align-self: end; min-height: 0; transition: visibility 1s; visibility: hidden;}
.demo07__padding { padding: 1vw;}
#togglerDemo07:checked ~ .demo07 {grid-template-rows: 1fr;}
#togglerDemo07:checked ~ .demo07 .demo07__content {visibility: visible;}
#outlineDemo07:checked ~ .demo07 {outline: 0.2vw dashed orange; outline-offset: 0.4vw;}
.demo08 {overflow: hidden; display: grid; grid-template-rows: 0fr; overflow: hidden; transition: grid-template-rows 1s;}
.demo08__content {background-color: var(--color-accent-200); color:var(--color-text); min-height: 0; transition: visibility 1s; visibility: hidden;}
.demo08__padding {padding: 1vw;}
#togglerDemo08:checked ~ .demo08 {grid-template-rows: 1fr;}
#togglerDemo08:checked ~ .demo08 .demo08__content {visibility: visible;}
#outlineDemo08:checked ~ .demo08 {outline: 0.2vw dashed orange; outline-offset: 0.4vw;}
</style>
code:
<div class="stella">hover over me</div>
<style>
.stella {display: flex; align-items: center; justify-content: center; position: relative;
margin: 2vw auto; width: 25vw; height: 25vw; background: skyblue; border-radius: 7.5vw;
font-family: 'Montserrat', sans-serif; font-size: 2vw; font-weight: lighter;
letter-spacing: .2vw; transition: 1s box-shadow;}
.stella:hover {box-shadow: 0 .5vw 3.5vw 0vw rgba(0,0,0,.1);}
.stella:hover::before, .stella:hover::after {display: block; content: ''; position: absolute;
width: 25vw; height: 25vw; background: #FDA8CF; border-radius: 7.5vw; z-index: -1;
animation: 1s clockwise infinite;}
.stella:hover:after {background: #F3CE5E; animation: 2s counterclockwise infinite; }
@keyframes clockwise {
0% {top: -.5vw; left: 0;}
12% {top: -.2vw; left: .2vw;}
25% {top: 0; left: .5vw;}
37% {top: .2vw; left: .2vw;}
50% {top: 2.5vw; left: 0;}
62% {top: 2vw; left: -2vw;}
75% {top: 0; left: -.5vw; }
87% {top: -.2vw; left: -.2vw;}
100% {top: -2.5vw; left: 0;}
}
@keyframes counterclockwise {
0% {top: -5vw; right: 0; }
12% {top: -.2vw; right: .2vw;}
25% {top: 0; right: .5vw; }
37% {top: .2vw; right: .2vw;}
50% {top: .5vw; right: 0;}
62% {top: .2vw; right: -.2vw;}
75% {top: 0; right: -5vw;}
87% {top: -2vw; right: -2vw;}
100% {top: -.5vw; right: 0;}
}
</style>